<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Collision</title>
</head>
<body>
<canvas id="physicsCanvas" width="450" height="420"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Styles and Parameters ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    const pivot = { x: 250, y: 70 };
    const rodLength = 220;
    const ballRadius = 16;
    const angleRad = 30 * Math.PI / 180;

    // --- Draw Pivot ---
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('O', pivot.x - 20, pivot.y + 5);

    // --- Draw Rods ---
    const rodBottomInitial = { x: pivot.x, y: pivot.y + rodLength };
    const rodBottomFinal = {
        x: pivot.x + rodLength * Math.sin(angleRad),
        y: pivot.y + rodLength * Math.cos(angleRad)
    };

    // Initial position (dashed line)
    ctx.beginPath();
    ctx.setLineDash([6, 4]);
    ctx.moveTo(pivot.x, pivot.y);
    ctx.lineTo(rodBottomInitial.x, rodBottomInitial.y);
    ctx.stroke();
    ctx.setLineDash([]); // Reset dash

    // Final position (solid rod)
    ctx.beginPath();
    ctx.lineCap = 'round';
    ctx.lineWidth = 6;
    ctx.moveTo(pivot.x, pivot.y);
    ctx.lineTo(rodBottomFinal.x, rodBottomFinal.y);
    ctx.stroke();
    ctx.lineWidth = 2; // Reset line width

    // --- Draw Angle Arc and Label ---
    ctx.beginPath();
    const arcRadius = 60;
    ctx.arc(pivot.x, pivot.y, arcRadius, Math.PI / 2, Math.PI / 2 + angleRad);
    ctx.stroke();
    const labelAnglePos = {
        x: pivot.x + (arcRadius + 20) * Math.sin(angleRad / 2),
        y: pivot.y + (arcRadius + 20) * Math.cos(angleRad / 2)
    };
    ctx.font = '18px Times New Roman';
    ctx.fillText('30°', labelAnglePos.x + 10, labelAnglePos.y - 10);


    // --- Draw Balls ---
    const collisionBallCenter = { x: rodBottomInitial.x, y: rodBottomInitial.y };
    const incomingBallCenter = { x: 100, y: rodBottomInitial.y };

    // Create a gradient for the textured look
    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, ballRadius);
    gradient.addColorStop(0, '#A9A9A9');
    gradient.addColorStop(0.7, '#808080');
    gradient.addColorStop(1, '#696969');

    // Incoming ball
    ctx.save();
    ctx.translate(incomingBallCenter.x, incomingBallCenter.y);
    ctx.beginPath();
    ctx.arc(0, 0, ballRadius, 0, 2 * Math.PI);
    ctx.fillStyle = gradient;
    ctx.fill();
    ctx.restore();

    // Ball at collision point
    ctx.save();
    ctx.translate(collisionBallCenter.x, collisionBallCenter.y);
    ctx.beginPath();
    ctx.arc(0, 0, ballRadius, 0, 2 * Math.PI);
    ctx.fillStyle = gradient;
    ctx.fill();
    ctx.restore();

    // --- Draw Vectors and Labels ---

    // Incoming momentum mv₀
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('m', 30, incomingBallCenter.y + 8);
    ctx.fillText('v', 50, incomingBallCenter.y + 8);
    ctx.font = 'italic 16px Times New Roman';
    ctx.fillText('0', 63, incomingBallCenter.y + 12);
    drawArrow(ctx, incomingBallCenter.x + ballRadius + 10, incomingBallCenter.y, collisionBallCenter.x - ballRadius - 10, collisionBallCenter.y);

    // Outgoing velocity v
    const v_arrow_y = collisionBallCenter.y + ballRadius + 25;
    drawArrow(ctx, collisionBallCenter.x - 20, v_arrow_y, collisionBallCenter.x + 50, v_arrow_y);
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('v', collisionBallCenter.x + 10, v_arrow_y + 20);

    // Angular velocity ω (curved arrow)
    const omega_center = {x: collisionBallCenter.x, y: collisionBallCenter.y + 5};
    const omega_radius = 45;
    ctx.beginPath();
    ctx.arc(omega_center.x, omega_center.y, omega_radius, 0.1 * Math.PI, 0.9 * Math.PI, false);
    ctx.stroke();
    // Arrowhead for omega
    const omega_end_angle = 0.9 * Math.PI;
    const omega_end_x = omega_center.x + omega_radius * Math.cos(omega_end_angle);
    const omega_end_y = omega_center.y + omega_radius * Math.sin(omega_end_angle);
    const tangent = omega_end_angle + Math.PI / 2;
    ctx.beginPath();
    ctx.moveTo(omega_end_x, omega_end_y);
    ctx.lineTo(omega_end_x - 10 * Math.cos(tangent - Math.PI / 6), omega_end_y - 10 * Math.sin(tangent - Math.PI / 6));
    ctx.moveTo(omega_end_x, omega_end_y);
    ctx.lineTo(omega_end_x - 10 * Math.cos(tangent + Math.PI / 6), omega_end_y - 10 * Math.sin(tangent + Math.PI / 6));
    ctx.stroke();
    //The double arrow in the original is non-standard. A single arrow is clearer. Let me add the other side to match the image.
    const omega_start_angle = 0.1 * Math.PI;
    const omega_start_x = omega_center.x + omega_radius * Math.cos(omega_start_angle);
    const omega_start_y = omega_center.y + omega_radius * Math.sin(omega_start_angle);
    const tangent_start = omega_start_angle - Math.PI / 2;
    ctx.beginPath();
    ctx.moveTo(omega_start_x, omega_start_y);
    ctx.lineTo(omega_start_x - 10 * Math.cos(tangent_start - Math.PI / 6), omega_start_y - 10 * Math.sin(tangent_start - Math.PI / 6));
    ctx.moveTo(omega_start_x, omega_start_y);
    ctx.lineTo(omega_start_x - 10 * Math.cos(tangent_start + Math.PI / 6), omega_start_y - 10 * Math.sin(tangent_start + Math.PI / 6));
    ctx.stroke();
    
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('ω', collisionBallCenter.x + 55, collisionBallCenter.y + 10);

    // --- Draw Bottom Label ---
    ctx.font = '20px "SimSun", "STSong"';
    ctx.fillStyle = 'black';
    ctx.fillText('题 8 图', canvas.width / 2 - 40, canvas.height - 10);

</script>
</body>
</html>